<template>
  <div class="financial-statistics">
    <!-- 标签页导航 -->
    <div class="tab-navigation">
      <div 
        v-for="(tab, index) in tabs" 
        :key="index"
        :class="['tab-item', { active: activeTab === index }]"
        @click="switchTab(index)"
      >
        {{ tab.name }}
      </div>
    </div>
    
    <!-- 图片显示区域 -->
    <div class="chart-container">
      <img 
        v-if="tabs[activeTab].image" 
        :src="tabs[activeTab].image" 
        :alt="tabs[activeTab].name"
        class="chart-image"
      />
      <div v-else class="no-image">
        <p>请将 {{ tabs[activeTab].fileName }} 图片放置到 src/assets/images/ 目录下</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FinancialStatistics',
  data() {
    return {
      activeTab: 0,
      tabs: [
        {
          name: '财务收入统计',
          fileName: 'financial-income.png',
          image: null
        },
        {
          name: '财务支出统计', 
          fileName: 'financial-expense.png',
          image: null
        },
        {
          name: '销售订单回款跟踪',
          fileName: 'sales-payment-tracking.png', 
          image: null
        },
        {
          name: '资金账户收支统计',
          fileName: 'account-income-expense.png',
          image: null
        }
      ]
    }
  },
  mounted() {
    this.loadImages()
  },
  methods: {
    switchTab(index) {
      this.activeTab = index
    },
    loadImages() {
      // 动态加载图片
      this.tabs.forEach((tab, index) => {
        try {
          tab.image = require(`@/assets/images/${tab.fileName}`)
        } catch (error) {
          console.warn(`图片 ${tab.fileName} 未找到，请将图片放置到 src/assets/images/ 目录下`)
          tab.image = null
        }
      })
    }
  }
}
</script>

<style scoped>
.financial-statistics {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tab-navigation {
  display: flex;
  border-bottom: 2px solid #e8e8e8;
  margin-bottom: 20px;
}

.tab-item {
  padding: 12px 24px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
  font-weight: 500;
  color: #666;
  white-space: nowrap;
}

.tab-item:hover {
  color: #409eff;
  background-color: #f5f7fa;
}

.tab-item.active {
  color: #409eff;
  border-bottom-color: #409eff;
  background-color: #ecf5ff;
}

.chart-container {
  min-height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fafafa;
  border-radius: 6px;
  border: 1px dashed #d9d9d9;
}

.chart-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.no-image {
  text-align: center;
  color: #999;
  font-size: 16px;
}

.no-image p {
  margin: 0;
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
}
</style>
